<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>网络收藏夹|瞬间</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="layui/css/layui.css">
    <style type="text/css">
			* {
				user-select: none;
			}

			.home-icon {
				width: 30px;
				height: 30px;
				margin-top: 16px;
				margin-left: 20px;
				cursor: pointer;
			}

			.header {
			    position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 60px;
                box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
                background-color: #23262E;
			}

			.center {
			    position: fixed;
                width: 100%;
                top: 60px;
                bottom: 44px;
                overflow: auto;
			}

			.footer {
			    position: fixed;
                bottom: 0;
                width: 100%;
                text-align: center;
                height: 44px;
                line-height: 44px;
			}

			#logout {
                margin-top: 20px;
                margin-right: 20px;
                float: right;
			}

			#addMoment {
			    margin-top: 16px;
                margin-left: 30px;
			}

			.main {
                background-color: #fff;
                border-radius: 2px;
                box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
                margin: 15px;
                padding: 15px;
                min-height: 400px;
			}

			.time {
				font-size: 14px !important;
				color: #999 !important;
			}

			.moment {
			    cursor: pointer;
			}

			.action {
				margin-top: 6px;
				line-height: 30px;
			}

			.action .layui-icon {
			    margin-right: 10px;
			    font-size: 18px;
			}

			.action .layui-icon:hover {
			    color: #ff5722;
			}

			.set-top {
				height: 22px;
				line-height: 22px;
				margin-right: 4px;
				font-size: 16px;
				cursor: pointer;
			}
		</style>
</head>
<body style="background-color: #f2f2f2;">
<div class="header">
    <a href="index.html"><img class="home-icon" src="images/home.svg" alt=""></a>
    <button id="addMoment" type="button" class="layui-btn layui-btn-sm">发布瞬间</button>
    <button class="layui-btn layui-btn-xs" type="button" id="logout">退出</button>
</div>
<div class="center" id="center">
    <div class="main">
        <ul class="layui-timeline" id="topMoment"></ul>
        <ul class="layui-timeline" id="momentList"></ul>
        <div id="noData" style="text-align: center;margin-top: 40px;display: none;">
            <img src="images/nodata-topic.svg" alt="">
            <p style="color: #666;margin-top: 10px;">您还没有瞬间，<a href="javascript:document.getElementById('addMoment').click();" style="color: #009688;">立即发布</a> ...</p>
        </div>
    </div>
</div>
<div class="footer">
    © 2020 在线网络收藏夹 || 在线网络收藏夹版权所有
</div>
<div id="editDiv"></div>
<script src="layui/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="layui/layui.js"></script>
<script>
    layui.use(['layer','flow'], function() {
        var layer = layui.layer;
        var flow = layui.flow;

        // 加载数据
        flow.load({
            elem: '#momentList'
            ,scrollElem: '#center'
            ,mb: 400
            ,end: ' '
            ,done: function(page, next){
              var lis = [];
              $.ajax({
                    type: "GET",
                    url: "moment/list",
                    data: {"pageNum": page,"pageSize": 10},
                    dataType: "json",
                    success: function (result) {
                        if (result.code == 0) {
                            $.each(result.data.list, function(index, item){
                                var html = '';
                                html += '<li class="layui-timeline-item" data-id="' + item.id + '">';
                                html += '   <i class="layui-icon layui-timeline-axis">&#xe63f;</i>';
                                html += '   <div class="layui-timeline-content layui-text">';
                                html += '       <h3 class="layui-timeline-title time">' + item.createTime + '</h3>';
                                html += '       <div class="moment">';
                                html += '           <div class="content">'+ item.content +'</div>';
                                html += '           <div class="layui-anim layui-anim-fadein action" data-id="' + item.id + '">';
                                html += '               <i class="layui-icon layui-icon-flag"></i>';
                                html += '               <i class="layui-icon layui-icon-edit"></i>';
                                html += '               <i class="layui-icon layui-icon-delete"></i>';
                                html += '           </div>';
                                html += '       </div>';
                                html += '    </div>';
                                html += '</li>';

                                lis.push(html);
                            });
                            next(lis.join(''), page < result.data.pages);
                        }
                    }
              });
            }
        });

        // jQuery全局拦截器
        $(document).ajaxSuccess(function(event,xhr,options){
            var result = xhr.responseJSON;
            if(result != undefined && result.code == "1001"){
                window.location.href= "login.html";
            }
        });

        // 编辑
        $(document).on('click', '.action .layui-icon-edit', function(e) {
            var id = $(e.target).parent().attr("data-id");
            $.ajax({
                type: "GET",
                url: "moment/" + id,
                dataType: "json",
                success: function (result) {
                    if (result.code == 0) {
                        var width = parseInt($(window).width()) * 0.9;
                        width = (width >= 800? 800 : width) + 'px';
                        layer.open({
                          id:"wangEditor",
                          type: 2,
                          content: 'wangEditor.html#' + id,
                          area: [width, '500px'],
                          btn: ['确认', '取消'],
                          yes: function(index, layero){
                            layer.load();
                            var frameId = $(layero).find("iframe").attr('id');
                            var subWindow = document.getElementById(frameId).contentWindow;
                            var html = subWindow.editor.txt.html();
                            var momentId = subWindow.momentId;
                            // 保存数据
                            $.ajax({
                                type: "POST",
                                url: "moment/update",
                                data: JSON.stringify({"content": html,"id": momentId}),
                                contentType: 'application/json;charset=utf-8',
                                dataType: "json",
                                success: function (result) {
                                    layer.closeAll('loading');
                                    if (result.code == 0) {
                                        layer.msg('保存成功', {icon: 6});
                                        layer.close(index);
                                        window.location.reload();
                                    } else {
                                        layer.msg('保存失败', {icon: 5});
                                    }
                                }
                            });
                          }
                        });
                    }
                }
            });
        });

        // 置顶
        $(document).on('click', '.action .layui-icon-flag', function(e) {
            var id = $(e.target).parent().attr("data-id");
            $.ajax({
                type: "POST",
                url: "moment/top/" + id,
                dataType: "json",
                success: function (result) {
                    if (result.code == 0) {
                        layer.msg('操作成功', {icon: 6});
                        loadTopMoment();
                    }
                }
            });
        });

        // 删除
        $(document).on('click', '.action .layui-icon-delete', function(e) {
            layer.confirm('确认删除吗?', function(index) {
                var id = $(e.target).parent().attr("data-id");
                $.ajax({
                    type: "GET",
                    url: "moment/delete/" + id,
                    dataType: "json",
                    success: function (result) {
                        if (result.code == 0) {
                            window.location.reload();
                        }
                    }
                });
                layer.close(index);
            });
        });

        // 取消置顶
        $(document).on('click','#topMoment .set-top',function(e){
            layer.confirm('确认取消置顶吗?', function(index) {
                var id = $(e.target).attr("data-id");
                $.ajax({
                    type: "DELETE",
                    url: "moment/top/" + id ,
                    dataType: "json",
                    success: function (result) {
                        if (result.code == 0) {
                            loadTopMoment();
                        }
                    }
                });
                layer.close(index);
            });
        });

        // 发布
        $("#addMoment").click(function() {
            var width = parseInt($(window).width()) * 0.9;
            width = (width >= 800? 800 : width) + 'px';
            layer.open({
              id:"wangEditor",
              type: 2,
              title: "发布瞬间",
              content: 'wangEditor.html',
              area: [width,'500px'],
              btn: ['确认', '取消'],
              yes: function(index, layero){
                var frameId = $(layero).find("iframe").attr('id');
                var subWindow = document.getElementById(frameId).contentWindow;
                var html = subWindow.editor.txt.html();
                if(html){
                    layer.load();
                    // 保存数据
                    $.ajax({
                        type: "POST",
                        url: "moment",
                        data: JSON.stringify({"content": html}),
                        contentType: 'application/json;charset=utf-8',
                        dataType: "json",
                        success: function (result) {
                            layer.closeAll('loading');
                            if (result.code == 0) {
                                layer.msg('保存成功', {icon: 6});
                                layer.close(index);
                                window.location.reload();
                            } else {
                                layer.msg('保存失败', {icon: 5});
                            }
                        }
                    });
                }else{
                    layer.msg("内容不能为空");
                }
              }
            });
        });

        // 登出
        $("#logout").click(function () {
            $.ajax({
                type: "GET",
                url: "login/out",
                dataType: "json",
                success: function (result) {
                    if (result.code == 0) {
                        window.location.href = "login.html";
                    }
                }
            });
        });

        window.loadTopMoment = function(){
            $("#topMoment").empty();
            $.ajax({
                type: "GET",
                url: "moment/top",
                dataType: "json",
                success: function (result) {
                    if (result.code == 0 && result.data) {
                        var moment = result.data;
                        var html = '';
                        html += '<li class="layui-timeline-item">';
                        html += '   <i class="layui-icon layui-timeline-axis">&#xe63f;</i>';
                        html += '   <div class="layui-timeline-content layui-text">';
                        html += '       <h3 class="layui-timeline-title time"><span class="layui-badge layui-bg-cyan set-top" data-id="' + moment.id + '">置顶</span>' + moment.createTime + '</h3>';
                        html += '       <div class="moment">';
                        html += '           <div class="content">'+ moment.content +'</div>';
                        html += '       </div>';
                        html += '    </div>';
                        html += '</li>';
                        $("#topMoment").append(html);
                    }
                }
            });
        };

        $(function(){
            loadTopMoment();
            // 暂无数据
            $.ajax({
                type: "GET",
                url: "moment/count",
                dataType: "json",
                success: function (result) {
                    if (result.code == 0 && result.data == 0) {
                        $("#noData").show();
                    }
                }
            });
        });
    });
</script>
</body>
</html>
